<template>
    <div>
        <div class="box">
            <h1>Student Information</h1>
        </div>
       <div class="txt">
           Name: <div class="n1">{{username}}</div>
        </div> 
         <div class="txt">
           Age: <div class="n1">{{age}}</div>
        </div> 
         <div class="txt">
           Gender: <div class="n1">{{gender}}</div>
        </div>
         <div class="txt">
           Phone: <div class="n1">{{phone}}</div>
        </div> 
        <div class="txt">
           Email: <div class="n1">{{email}}</div>
        </div>
     </div>  
</template>
<script>
exports.default = {
  data() {
    return {
      username: "lucy",
      age:22,
      phone:1816171615,
      email:'lucy@126.com',
      gender:'Female'
    };
  }
};
</script>
<style>
.box{
    width:700px;
    height:50px;
    margin:30px auto;
}
.txt{
    width:600px;
    height:50px;
    margin:30px auto 100px auto;
    font-size: 30px;
    font-weight: 500;
}
.n1 {
  width: 500px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  color: crimson;
  border: 2px solid crimson;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgb(170, 21, 51);
}
</style>